<script setup lang="ts">
import dayjs from 'dayjs'
import { useUserInfoStore } from '@/store/userInfo'
import { fetchPaymentDetailAPI } from '@/apis/fetchPaymentDetail'
import { useProjectConfigStore } from '@/store/projectConfig'

const userInfoStore = useUserInfoStore()
const projectConfigStore = useProjectConfigStore()

const loading = ref(false)

const paymentId = ref('')
const projectId = ref('')
const paymentDetail = ref<CwPaymentDetail | null>(null)

// 合同照片
const contactImages = computed(() => {
  if (paymentDetail.value?.project?.contract_images)
    return paymentDetail.value?.project?.contract_images.split(',')
  else
    return []
})

// 加载页面时请求项目数据和打款数据
onLoad(async (options) => {
  if (options && options.payment_id && options.project_id) {
    try {
      paymentId.value = options.payment_id
      projectId.value = options.project_id
      loading.value = true

      const res = await fetchPaymentDetailAPI(paymentId.value, userInfoStore.userInfo!.token!)
      if (res.data?.data)
        paymentDetail.value = res.data.data
      setTimeout(() => loading.value = false, 300)
    }
    catch (err) {
      uni.showToast({ title: '获取数据失败，请稍后重试', icon: 'none' })
    }
  }
})

function handleCall(phoneNumber: string) {
  uni.makePhoneCall({
    phoneNumber,
    fail: () => uni.showToast({ title: '呼叫取消', icon: 'none' }),
  })
}
</script>

<template>
  <Spacer height="30" />
  <ContactCard
    :contact-name="paymentDetail?.project?.contacts_name || '未知'"
    contact-identity="业主"
    :contact-mobile="paymentDetail?.project?.contacts_mobile || '未知'"
    @call="handleCall"
  />
  <Spacer height="10" />
  <view class="flex items-center pt-30rpx pb-24rpx">
    <image class="w-36rpx h-32rpx mr-13rpx" src="@/static/images/folder.png" />
    <view class="text-30rpx leading-30rpx font-bold text-secondary">
      项目信息
    </view>
  </view>
  <view class="bg-white rounded-10rpx">
    <ListCell label="项目名称">
      <ListValue>{{ paymentDetail?.project?.name || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="项目定位">
      <ListValue>{{ `${paymentDetail?.project?.province}${paymentDetail?.project?.city}${paymentDetail?.project?.district}` }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="详细位置">
      <ListValue>{{ paymentDetail?.project?.address || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="装修面积">
      <ListValue>{{ paymentDetail?.project?.extent || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="装修风格">
      <ListValue>{{ paymentDetail?.project?.zx_style || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="装修类型">
      <ListValue>{{ projectConfigStore.projectTypeList.find(el => el.id?.toString() === paymentDetail?.project?.project_type_id?.toString())?.name || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="工期截止">
      <ListValue>{{ paymentDetail?.project?.duration ? dayjs.unix(Number(paymentDetail?.project?.duration)).format('YYYY.MM.DD') : '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="户型">
      <ListValue>{{ projectConfigStore.houseTypeList.find(el => el.id?.toString() === paymentDetail?.project?.house_type?.toString())?.name || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="项目总价">
      <ListValue>{{ paymentDetail?.project?.money_total || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell direction="column" label="项目合同照片">
      <PictureGrid mode="display" :width="630" :cols="3" :pictures="contactImages" />
    </ListCell>
    <Divider />
    <ListCell direction="column" label="具体要求">
      <ListParagraph>{{ paymentDetail?.project?.ask || '未知' }}</ListParagraph>
    </ListCell>
  </view>
  <view class="flex items-center pt-30rpx pb-24rpx">
    <image class="w-32rpx h-32rpx mr-13rpx" src="@/static/images/person.png" />
    <view class="text-30rpx leading-30rpx font-bold text-secondary">
      客户信息
    </view>
  </view>
  <view class="bg-white rounded-10rpx">
    <ListCell label="客户姓名">
      <ListValue>{{ paymentDetail?.project?.contacts_name || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="客户手机号">
      <ListValue>{{ paymentDetail?.project?.contacts_mobile || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell direction="column" label="打款信息">
      <PictureGrid mode="display" :width="630" :cols="3" :pictures="paymentDetail?.pay_images?.split(',') || []" />
    </ListCell>
    <Divider />
    <ListCell label="打款时间">
      <ListValue>{{ paymentDetail?.create_time ? dayjs.unix(paymentDetail.create_time).format('YYYY/MM/DD HH:mm') : '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="打款金额">
      <ListValue>{{ paymentDetail?.pay_money ? `¥${paymentDetail?.pay_money}` : '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell direction="column" label="打款备注">
      <ListParagraph>{{ paymentDetail?.pay_desc || '未知' }}</ListParagraph>
    </ListCell>
  </view>
  <view class="flex items-center pt-30rpx pb-24rpx">
    <image class="w-32rpx h-35rpx mr-13rpx" src="@/static/images/pen.png" />
    <view class="text-30rpx leading-30rpx font-bold text-secondary">
      录入信息
    </view>
  </view>
  <view class="bg-white rounded-10rpx">
    <ListCell label="业务员">
      <ListValue>{{ paymentDetail?.project?.salesman?.nickname || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="业务员手机号">
      <ListValue>{{ paymentDetail?.project?.salesman?.mobile || '未知' }}</ListValue>
    </ListCell>
    <Divider />
    <ListCell label="提交时间">
      <ListValue>
        {{ dayjs.unix(paymentDetail?.create_time!).format('YYYY-MM-DD HH:mm') || '未知' }}
      </ListValue>
    </ListCell>
  </view>
  <Spacer height="240" />
</template>

<route lang="yaml">
name: 'paymentDetail'
style:
  navigationBarTitleText: '收款详情'
</route>
